
<template>
  <el-dialog top="80px"
    :visible.sync="isVisible"
    :title="'设备绑定'"
    :close-on-click-modal="false"
    :close-on-press-escape="false">
    <el-container>
      <el-main v-loading="submitLoading"
        :style="{ 'max-height': maxHeightDialog }"
        :element-loading-text="submitLoading ? '提交中...' : '加载中...'"
        class="container-main">
        <div>
          <el-form size="small"
            label-position="right">
            <el-row>
              <el-col :span="6">
                <el-form-item label="设备编码"
                  label-width="80px">
                  <el-input v-model="searchModel.deviceSource"
                    placeholder="设备编码"
                    clearable
                    class="filter-item search-item" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="设备名称"
                  label-width="80px">
                  <el-input v-model="searchModel.deviceName"
                    placeholder="设备名称"
                    clearable
                    class="filter-item search-item" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="设备类型"
                  label-width="80px">
                  <el-select v-model="searchModel.deviceType"
                    placeholder="设备类型"
                    clearable
                    filterable>
                    <el-option v-for="item in deviceDictionaries"
                      :key="item.dictValue"
                      :label="item.dictText"
                      :value="item.dictValue" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5"
                style="margin-left: 10px">
                <el-form-item>
                  <el-button type="primary"
                    @click="toSearch"
                    style="margin-right: 10px">搜索</el-button>
                  <el-button type="info"
                    @click="toReset">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <el-table ref="elTable"
            v-loading="loading"
            border
            fit
            size="medium "
            :data="dataList"
            :row-key="(row) => row.id"
            style="width: 100%"
            @selection-change="onSelectionChange"
            tooltip-effect="dark">
            <af-table-column align="center"
              type="selection"
              width="40"
              :reserve-selection="true" />
            <el-table-column align="center"
              type="index"
              width="50"
              label="#"
              :index="indexMethod" />

            <af-table-column align="center"
              label="设备编码"
              prop="deviceSource"
              width="220" />
            <af-table-column align="center"
              label="设备名称"
              prop="deviceName"
              width="220" />
            <af-table-column align="center"
              label="设备区分"
              prop="deviceIsLine"
              width="100">
              <template slot-scope="{ row }">
                {{ row.deviceIsLine == 1 ? '智能无线' : '传统无线' }}
              </template>
            </af-table-column>
            <af-table-column align="center"
              label="设备类型"
              prop="deviceTypeStr"
              width="150" />

            <af-table-column align="center"
              label="设备所在位置"
              prop="deviceLocation"
              show-overflow-tooltip>
              <template slot-scope="{ row }">
                {{
                  row.gridMountFullPathText == null ||
                  row.gridMountFullPathText == ''
                  ? ''
                  : row.gridMountFullPathText + '>>'
                }}{{ row.deviceLocation }}
                <!-- {{ row.deviceLocation }} -->
              </template>
            </af-table-column>
          </el-table>
          <pagination v-show="total > 0"
            :total="total"
            :page.sync="pagination.pageNum"
            :limit.sync="pagination.pageSize"
            :page-sizes="pageSizeOptions"
            @pagination="getDataList" />
        </div>
        <div style="margin-top: 50px">
          <div style="font-weight: 550; margin-bottom: 10px">已选设备</div>
          <div style="height: 210px; overflow: auto; padding-right: 5px"
            class="container-main">
            <el-table ref="table"
              fit
              border
              size="mini"
              :data="selectedDataList"
              style="width: 100%"
              tooltip-effect="dark">
              <el-table-column align="center"
                type="index"
                width="50"
                label="#" />

              <af-table-column align="center"
                label="设备编码"
                prop="deviceSource"
                width="220" />
              <af-table-column align="center"
                label="设备名称"
                prop="deviceName"
                width="220" />
              <af-table-column align="center"
                label="设备区分"
                prop="deviceIsLine"
                width="100">
                <template slot-scope="{ row }">
                  {{ row.deviceIsLine == 1 ? '智能无线' : '传统无线' }}
                </template>
              </af-table-column>
              <af-table-column align="center"
                label="设备类型"
                prop="deviceTypeStr"
                width="150" />

              <af-table-column align="center"
                label="设备所在位置"
                prop="deviceLocation"
                show-overflow-tooltip>
                <template slot-scope="{ row }">
                  {{
                    row.gridMountFullPathText == null ||
                    row.gridMountFullPathText == ''
                    ? ''
                    : row.gridMountFullPathText + '>>'
                  }}{{ row.deviceLocation }}
                </template>
              </af-table-column>
            </el-table>
          </div>
        </div>
      </el-main>

      <el-footer>
        <el-button size="medium"
          icon="el-icon-close"
          :disabled="submitLoading"
          style="width: 120px; margin-right: 10px"
          @click="toClose">
          取消
        </el-button>
        <el-button size="medium"
          type="primary"
          icon="el-icon-check"
          :disabled="submitLoading"
          :loading="submitLoading"
          style="width: 120px"
          @click="toSubmit">
          确定
        </el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>
<script>
import Pagination from '@/components/Pagination'
import dataTableMixins from '@/mixins/data-table-mixins'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import deviceManageApi from '@/api/device-manage'

export default {
  components: {
    Treeselect,
    Pagination,
  },
  mixins: [dataTableMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },

    indexRecord: {
      type: Object,
      default: null,
    },
  },
  data () {
    return {
      maxHeightDialog: this.getHeightAndWidth(),
      submitLoading: false,

      deviceDictionaries: [],
      selectedDevices: [],
    }
  },
  computed: {
    isVisible: {
      get () {
        return this.dialogVisible
      },
      set () {
        this.toClose()
      },
    },
  },
  mounted () {
    this.getDictValueAttr()
  },
  methods: {
    getDictValueAttr () {
      const data = {
        fieldName: 'collect_type',
        tableName: 't_equipment_collect',
      }
      deviceManageApi.getDictValueAttr(data).then((ret) => {
        this.deviceDictionaries = ret.data.dictValue

        this.getSelectedDevices()
      })
    },
    getSelectedDevices () {
      const data = {
        cameraId: this.indexRecord.id,
        isNeedEquipmentMsg: true,
      }
      deviceManageApi
        .getCameraBindEquipment(data)
        .then((res) => {
          const list = res.data.data
          const deviceList = []
          list.forEach((ele) => {
            ele.equipmentInfo && deviceList.push(ele.equipmentInfo)

          })
          this.selectedDataList = deviceList
          if (this.selectedDataList.length != 0) {
            this.selectedDataList.forEach((row) => {
              this.$refs.elTable.toggleRowSelection(row)

              this.deviceDictionaries.forEach((ele1, i1) => {
                if (Number(row.deviceType) === ele1.dictValue) {
                  row.deviceTypeStr = ele1.dictText
                }
              })

            })
          }
          this.getDataList()
        })
        .catch(() => {
          this.getDataList()
        })
    },
    getDataList () {
      this.loading = true
      // this.searchModel.deviceIsLine = 1
      const searchModel = this.formatSearchData(this.searchModel)

      deviceManageApi
        .getDeviceList({ ...this.pagination, ...searchModel })
        .then((ret) => {
          this.dataList = ret.data.data.rows

          this.dataList.forEach((ele, i) => {
            // this.selectedDataList.forEach((multEle, j) => {
            //   if (this.dataList[i].id === this.selectedDataList[j].id) {
            //     this.$refs.elTable.toggleRowSelection(this.dataList[i], true)
            //   }
            // })
            this.deviceDictionaries.forEach((ele1, i1) => {
              if (Number(ele.deviceType) === ele1.dictValue) {
                ele.deviceTypeStr = ele1.dictText
              }
            })
          })

          this.total = ret.data.data.total
          this.loading = false
        })
        .catch(() => {
          this.loading = false
          this.dataList = []
          this.total = 0
        })
    },
    toSearch () {
      this.pagination.pageNum = 1
      this.getDataList()
    },
    toReset () {
      this.searchModel = {}
      this.sort = {}
      this.$refs.elTable.clearSort()
      this.$refs.elTable.clearFilter()
      this.toSearch()
    },
    onSelectionChange (selection) {
      this.selectedDataList = selection
    },
    toEmptySelection () {
      this.$refs.elTable.clearSelection()
    },
    indexMethod (index) {
      return this.formatIndex(index, this.pagination)
    },

    toClose () {
      this.$emit('close')
    },
    toSubmit () {
      if (this.selectedDataList.length == 0) {
        this.$message({
          message: '请选择需要绑定的设备',
          type: 'warning',
          duration: 4000,
        })
        return
      }

      const ids = []
      this.selectedDataList.forEach((ele) => {
        ids.push(ele.id)
      })
      const submitModel = {
        cameraId: this.indexRecord.id,
        equipmentIds: ids,
      }
      deviceManageApi.addCameraBindEquipment(submitModel).then((res) => {
        this.isVisible = false
        this.$message({
          message: '绑定成功！',
          type: 'success',
        })
        this.toClose()
      })

    },
  },
}
</script>

<style lang='scss' scoped>
@import '../../../../../styles/part-custom';

::v-deep.el-table--medium .el-table__cell {
  padding: 5px 0;
}
</style>
